<template>
  <!-- 一级评论 -->
  <div>
    <!-- 发表评论 -->
    <sentComment
      @refreshList="refreshList"
      @renew="replyitem = null"
      :parent="replyitem"
    />
    <div class="commentList">
      <div
        class="container-cm"
        v-for="(item, index) in commentList"
        :key="index"
      >
        <!-- 用户信息 -->
        <div class="userinfo">
          <div class="userpic">
            <img :src="item.account.defaultAvatar" alt="" />
          </div>
          <span class="usernickname">{{ item.account.nickname }}</span>
          <span class="createtime">{{
            moment(item.updated_at).format("YYYY-MM-DD HH:mm")
          }}</span>
        </div>

        <!-- 评论内容 -->
        <div class="commentContent">
          <!-- 父级评论 -->
          <commentItem
            v-if="item.parent"
            :data="item.parent"
            @replyCommentitem="replyComment"
          />
          <div class="replyhover">
            <div class="piclist" v-if="item.pics.length">
              <div class="commentPic" v-for="(pic, i) in item.pics" :key="i">
                <img :src="pic.url" alt="" />
              </div>
            </div>
            <div v-else></div>
            <p>{{ item.content }}</p>
            <!-- <el-link type="primary" class="reply">回复</el-link> -->
            <div class="display">
              <a href="javascript:;" class="reply" @click="replyComment(item)"
                >回复</a
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentpage"
      :page-sizes="[5, 8, 12, 20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import http from "@/utils/http";
import moment from "moment";
import commentItem from "@/components/post/commentItem";
import sentComment from "@/components/post/sentComment";

export default {
  components: {
    commentItem,
    sentComment,
  },
  data() {
    return {
      moment,
      isshow: false,
      commentList: [], //评论列表
      replyitem: null, //回复评论时传递数据，子组件监听null--{}
      pagesize: 5, //每页多少条
      start: 0, // _start	Number	开始数据（分页）
      currentpage: 1, //当前页
      total: 0,
    };
  },
  watch: {
    $route() {
      console.log("路由变化评论列表刷新");
      this.start = 0;
      this.initList();
    },
  },
  mounted() {
    this.initList();
  },
  methods: {
    // 监听子组件发来的事件、进行评论列表刷新
    refreshList() {
      this.initList();
    },
    // 评论列表获取
    initList() {
      this.$axios({
        url: "/posts/comments",
        params: {
          post: this.$route.query.id,
          _limit: this.pagesize,
          _start: this.start,
        },
      }).then((res) => {
        console.log(res);
        this.total = res.data.total;
        this.commentList = res.data.data.map((item) => {
          //   console.log(this.commentList);
          item.account.defaultAvatar =
            http.defaults.baseURL + item.account.defaultAvatar;
          item.pics.map((pic) => {
            pic.url = http.defaults.baseURL + pic.url;
            return pic;
          });
          return item;
        });
        console.log(this.commentList);
      });
    },
    // 回复一级评论事件，需要回复id--父传子--告诉子组件
    replyComment(item) {
      console.log(item);
      this.replyitem = item;
    },
    // 分页功能实现：
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.initList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentpage = val;
      this.start = (val - 1) * this.pagesize;
      this.initList();
    },
  },
};
</script>

<style lang="less" scoped>
.commentList {
  border: 1px solid #eee;
  margin-bottom: 30px;
  .container-cm {
    position: relative;
    border-bottom: 1px solid #eee;
    .userinfo {
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      margin: 15px 0 0 10px;
      .userpic {
        width: 20px;
        height: 20px;
        border-radius: 10px;
        overflow: hidden;
      }
      .usernickname {
        font-size: 14px;
        color: rgb(85, 83, 83);
        margin: 0 5px;
      }
      .createtime {
        font-size: 12px;
        color: rgb(179, 176, 176);
      }
    }
    .commentContent {
      margin: 10px 0 15px 0;
      padding-left: 35px;
      .display {
        padding-right: 15px;
        .reply {
          display: block;
          text-align: right;
          // margin-left: 537px;
          opacity: 0;
        }
      }

      .piclist {
        display: flex;
        justify-content: flex-start;
        .commentPic {
          width: 70px;
          height: 70px;
          border: 2px dashed #ccc;
          > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }

    .replyhover:hover .reply {
      opacity: 1;
      color: rgb(25, 0, 255);
    }
    .reply:hover {
      text-decoration: underline;
    }
  }
}
</style>